<template>
  <section>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input
          v-permission="installPermissions.permissions.group.list"
          placeholder="请输入搜索关键词"
          v-model="searchParams.key"
          prefix-icon="fa fa-search"
        >
          <div slot="append">
            <el-button
              type="primary"
              icon="fa fa-search"
              @click=" pager.pager.pageNumber = 1 ;doSearch()"
            />
          </div>
        </el-input>
      </el-col>
      <el-col
        :span="4"
        :offset="12"
      >
        <el-button
          v-permission="installPermissions.permissions.group.add"
          type="primary"
          size="small"
          @click="handleEdit({id:0})"
          icon="el-icon-plus"
        >
          添加分组
        </el-button>
      </el-col>
    </el-row>
    <egrid
      class="egrid"
      stripe
      border
      :data="pager.dataList"
      :columns="columns"
    />
    <el-row>
      <el-col
        :span="6"
        :offset="18"
      >
        <el-pagination
          style="float:right"
          layout="prev, pager, next"
          :total="pager.pager.recordCount"
          :page-size="pager.pager.pageSize"
          :current-page.sync="pager.pager.pageNumber"
          v-show="pager.pager.pageCount != 0"
          @current-change="changePage"
        />
      </el-col>
    </el-row>

    <!-- 添加和编辑弹出框 -->
    <AddAndEdit
      v-model="addAndEditValue"
      @on-show-change="addAndEditDone"
    />
    <!--选择合作社页面-->
    <Cooperative
      v-model="chooseCooperative"
      @on-show-change="chooseCooperativeDone"
    />
    <!--选择员工页面-->
    <Employee
      v-model="chooseEmployee"
      @on-show-change="chooseEmployeeDone"
    />
  </section>
</template>
<style>
</style>
<script>
    import AddAndEdit from "./AddAndEdit";
    import Ops from "./ops.vue";
    import Cooperative from "./cooperative"
    import Employee from "./employee"

    export default {
        components: {
            AddAndEdit: AddAndEdit,
            Cooperative: Cooperative,
            Employee: Employee
        },
        data() {
            return {
                searchParams: {
                    organizationIds: [],
                    key: ""
                },
                defaultProps: {
                    children: "sub",
                    value: "id",
                    label: "name"
                },
                organizations: [],
                grantValue: {
                    id: 0,
                    show: false
                },
                resetValue: {
                    id: 0,
                    show: false
                },
                addAndEditValue: {
                    show: false,
                    group: {id: 0}
                },
                chooseCooperative: {
                    show: false,
                    group: {id: 0}
                },
                chooseEmployee: {
                    show: false,
                    group: {id: 0}
                },
                powerInfo: {
                    selectedIds: [],
                    userId: 0
                },
                powerShow: false,
                permissions: [],
                columns: [
                    {label: "ID", width: "55", align: "center", prop: "id"},
                    {
                        label: "名称",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "name"
                    },
                    {
                        label: "车牌号",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "licencePlate",
                        propsHandler: function ({row, col, column}) {
                            row.licencePlate = row.licencePlate ? row.licencePlate : '暂无';
                            return {row, col, column};
                        }
                    },
                    {
                        label: "操作",
                        align: "center",
                        component: Ops,
                        listeners: {
                            deleteDone: this.loadData,
                            editRow: this.handleEdit,
                            chooseCooperative: this.handleCooperative,
                            chooseEmployee: this.handleEmployee
                        }
                    }
                ],
                applications: [],
                pager: {
                    dataList: [],
                    pager: {
                        pageCount: 0,
                        pageNumber: 1,
                        pageSize: 15,
                        recordCount: 0
                    },
                    paras: {
                        key: ""
                    }
                }
            };
        },
        methods: {
            doSearch() {
                window.setTimeout(() => {
                    this.$api.group.search(
                        this.searchParams.key,
                        this.pager.pager.pageNumber,
                        result => {
                            this.pager = result.pager;
                        }
                    );
                }, 100);
            },
            changePage() {
                // if (this.searchParams.organizationId || this.searchParams.key) {
                if (this.searchParams.key) {
                    this.doSearch();
                } else {
                    this.loadData();
                }
            },
            handleEdit(row) {
                this.addAndEditValue = {show: true, group: this.$clone(row)};
            },
            handleCooperative(row) {
                this.chooseCooperative = {show: true, group: this.$clone(row)};
            },
            handleEmployee(row) {
                this.chooseEmployee = {show: true, group: this.$clone(row)};
            },
            addAndEditDone(data) {
                console.log(data);
                this.addAndEditValue.show = data.visible;
                this.changePage();
            },
            chooseCooperativeDone(data) {
                console.log(data);
                this.chooseCooperative.show = data.visible;
                this.changePage();
            },
            chooseEmployeeDone(data) {
                this.chooseEmployee.show = data.visible;
                this.changePage();
            },
            loadData() {
                this.$api.group.list(this.pager.pager.pageNumber, result => {
                    console.log(result.pager);
                    this.pager = result.pager;
                });
            },
            loadTree() {
                // this.$api.organization.tree(0, false, result => {
                //   this.organizations = result.tree || [];
                // });
            },
            loadApplications() {
                this.$api.application.all(result => {
                    this.applications = result.applications;
                });
            }
        },
        created() {
            this.loadData();
            // this.loadTree();
            // this.loadApplications();
        },
        watch: {
            searchParams: {
                handler() {
                    if (this.searchParams.organizationIds) {
                        this.searchParams.organizationId = this.searchParams.organizationIds[
                        this.searchParams.organizationIds.length - 1
                            ];
                    } else {
                        this.searchParams.organizationId = null;
                    }
                },
                immediate: true,
                deep: true
            }
        }
    };
</script>
